<!--
   Copyright 2024 The Google Research Authors.
  
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<!DOCTYPE html>
<html>
<head>
<title>Click Checkboxes Click Widget Click Button Sequence Task</title>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="../core/core.css">
<link rel="stylesheet" href="../core/jquery-ui/jquery-ui.min.css">
<style>
  input { width: 20px; }
  #area .widget { margin: 5px 0;}
  #area textarea { height: 20px; }
  #area input[type=input] { width: 120px !important; }
  #subbtn1 { width: 40px; height: 30px; }
  #subbtn2 { width: 40px; height: 30px; }
  /* 160 + 160 + 50 + 30 */
  #wrap,
  #sync-task-cover {
    height: 400px;
    width: 160px;
  }

  #click-canvas,
  #reward-display {
    left: 165px;
  }

  #query {
    background-color: #FF0;
    font-size: 10px;
    height: 74px;
    padding: 3px;
  }
</style>

<!-- JS -->
<script src="../core/core.js"></script>
<script src="../core/d3.v3.min.js"></script>
<script src="../common/ui_utils.js"></script>
<script src="../core/jquery-ui/external/jquery/jquery.js"></script>
<script src="../core/jquery-ui/jquery-ui.min.js"></script>

<script>
core.EPISODE_MAX_TIME = 2000000;  // set episode interval to 2000 seconds

var ELEMENT_NAMES = ['radio', 'checkbox', 'text', 'textarea', 'button'];
var ELEMENT_HTML = {
  'radio': {'start': '<div class="widget"><label><input type="radio" data-type="radio" name="radio">',
    'end': '</label></div>'},
  'checkbox': {'start':' <div class="widget"><label><input type="checkbox" data-type="checkbox">',
    'end':'</label></div>'},
  'text': {'start': '<div class="widget"><input type="input" data-type="text" value="',
    'end':'"></div>'},
  'textarea': {'start':'<div class="widget"><textarea data-type="textarea">',
    'end':'</textarea></div>'},
  'button': {'start': '<div class="widget"><button data-type="button">',
    'end':'</button></div>'}
};
var NUM_ELEMENTS = 5;

var createCheckboxes = function(div){
  var checkboxData = { toclick: {}, clickNames: [] };

  checkboxData.elems = core.randi(2, 7);
  for(var i=0;i<checkboxData.elems;i++) {
    var chname = ui_utils.generateString(2,8);
    var label = div.append('label')
    label.append('input').attr('type', 'checkbox').attr('id', 'ch'+i);
    label[0][0].innerHTML += chname;
    div.append('br');

    checkboxData.toclick[i] = false;
    if(core.randf(0,1) < 0.5) {
      checkboxData.toclick[i] = true;
      checkboxData.clickNames.push(chname);
    }
  }

  return checkboxData;
}

var createWidgets = function(){
  // generate query text in the UI
  var elements = []
  for(var i=0;i<NUM_ELEMENTS;i++){
    randIndex = core.randi(0,ELEMENT_NAMES.length);
    var elemName = ELEMENT_NAMES[randIndex];
    var randomText = ui_utils.generateString(1,6);
    $('#area').append(ELEMENT_HTML[elemName]['start'] + randomText + ELEMENT_HTML[elemName]['end']);
    elements.push(elemName);
  }

  return elements;
}

var genProblem = function() {
  var box_state = -1.0;
  var div = d3.select('#area');
  div.html(''); // clear previous problem, if any

  var boxesDiv = $('#boxes');
  if (boxesDiv.length == 0){
    div.append('div').attr('id', 'boxes');
    div.append('br');
    div.append('button').attr('id', 'subbtn').attr('class', 'secondary-action').html('Submit');
  }
  var boxesDiv = d3.select('#boxes');
  var checkboxData = createCheckboxes(boxesDiv);

  var qstr = checkboxData.clickNames.join(', ');
  if(qstr.length === 0) { qstr = 'nothing'; }

  // click-widget
  var widget_state = -1.0;
  var elements = createWidgets();
  var chosenElement = core.sample(elements);

  d3.select('#subbtn').on('click', function(){
    var r = 0;
    for(var i=0;i<checkboxData.elems;i++) {
      var is_checked = d3.select('#ch'+i)[0][0].checked;
      r += is_checked === checkboxData.toclick[i] ? 1.0 : -1.0;
    }
    box_state = r == checkboxData.elems ? 1.0 : -1.0;
    console.log('click-checkboxes', box_state);

    console.log(d3.select('#area .widget'));
    $('#area .widget').on('click', function(){
      console.log('click-widget clicked');
      var elemType = $(this).find('input, textarea, button')[0].getAttribute('data-type');
      if (box_state == 1.0) {
        widget_state = elemType === chosenElement ? 1.0 : -1.0;
        console.log('click-widget', elemType, chosenElement, widget_state);
      } else {
        widget_state = -1.0;
        console.log('click-widget', elemType, chosenElement, widget_state);
      }
    });
  });

  // click-button-sequence
  var button_state = -1.0
  // var L = core.randi(0, 118); var U = core.randi(0, 118) + 50;
  var L = core.randi(50, 118); var U = core.randi(80, 118) + 80;
  div.append('button').attr('id', 'subbtn1').html('ONE');
  d3.select('#subbtn1').attr('style', 'position:absolute; left:'+L+'px; top:'+U+'px');
  d3.select('#subbtn1').on('click', function(){
    if (button_state == -1.0) {
      button_state = 1.0
    } else {
      button_state = -1.0
    }
    console.log('click-button-sequence: ONE', button_state);
  });

  // var L = core.randi(0, 118); var U = core.randi(0, 118) + 50;
  var L = core.randi(50, 118); var U = core.randi(80, 118) + 80;
  div.append('button').attr('id', 'subbtn2').html('TWO');
  d3.select('#subbtn2').attr('style', 'position:absolute; left:'+L+'px; top:'+U+'px');
  d3.select('#subbtn2').on('click', function(){
    if (button_state == 1.0 && box_state == 1.0 && widget_state == 1.0) {
        console.log('click-button-sequence: TWO', button_state);
        core.endEpisode(button_state, button_state > 0);
    } else {
        console.log('click-button-sequence: TWO', button_state);
        core.endEpisode(-1.0);
    }
  });

  // d3.select('#query').html('Select ' + qstr + ' and click Submit, click on a "' + chosenElement + '" widget, and then click button ONE, then click button TWO.');
  d3.select('#query').html('Click on a "' + chosenElement + '" widget, and click button ONE, then click button TWO, after selecting ' + qstr + ' and clicking Submit.');
}

window.onload = function() {
  core.startEpisode();
}
</script>
</head>
<!-- Base HTML -->
<body>
<div id="wrap">
  <div id="query"></div>
  <div id="area">
    <div id="boxes"></div>
    <br>
    <button id="subbtn" class="secondary-action">Submit</button>
  </div>
</div>
</body>
</html>
